import {Component, OnInit, Input, Output, EventEmitter, OnChanges} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {UserService} from '@kylin/user';
import * as _ from 'lodash';
import {HttpService} from '@kylin/http';
import {NzMessageService} from 'ng-zorro-antd';

@Component({
    selector: 'kylin-add-feature-attr',
    templateUrl: './add-feature-attr.component.html',
    styleUrls: ['./add-feature-attr.component.less']
})
export class AddFeatureAttrComponent implements OnInit, OnChanges {
    showFeatureAttEdit: boolean = false;
    @Input() showIcon: boolean = false;
    propertyData: any = {};
    @Input() drawType;
    @Input() addFeatureModel;
    @Input() definLayer;
    @Input() currentSelectFeature;
    @Output() finish = new EventEmitter<any>();
    @Output() clone = new EventEmitter<any>();
    @Output() getFeatureAttr = new EventEmitter<any>();
    @Output() emitColor = new EventEmitter<any>();
    creatUser;
    creatTime;
    layerName;
    layerType;
    showAttrForm: boolean = false;
    showUserForm: boolean = false;
    AttrForm: FormGroup;
    userForm: FormGroup;

    bindUserArr: any[] = [];
    checkOptionsOne = []; // 假
    attArray: any[] = [];  // 绑定属性数组
    featureName: string; // 图层的名称

    showSetPointComponent = false;
    showSetLineComponent = false;
    showSetPolygonComponent = false;
    selectcolor = '';
    style;
    constructor(private fb: FormBuilder,
                private userService: UserService,
                private http: HttpService,
                private message: NzMessageService) {
        this.creatUser = userService.user || '匿名';
    }

    ngOnChanges(e) {
        this.attArray = [];
        this.featureName = '';
        this.bindUserArr =  [];
        this.style = '';
        this.layerType = this.definLayer.layerType;
        if (this.addFeatureModel) {
            this.getBaseAttr();
        }
        if (this.currentSelectFeature) {
            if (this.currentSelectFeature.properties) {
                this.showFeatureAttEdit = true;
                this.attArray = this.currentSelectFeature.properties.attr || [];
                this.featureName = this.currentSelectFeature.properties.featurename;
                this.bindUserArr =  this.currentSelectFeature.properties.user || [];
                this.style = this.currentSelectFeature.properties.style;
                this.selectcolor = this.currentSelectFeature.properties.style;
                if (this.bindUserArr.length !== 0) {
                    this.initUserData();
                }
            }
        }
    }

    initUserData() {
        this.bindUserArr.map(data => {
            this.checkOptionsOne.map(item => {
                if (data.id === item.id) {
                    item.checked = true
                }
            })
        });
        return this.checkOptionsOne;
    }

    getBaseAttr() {
        // 假数据
        this.creatTime = this.getNewDate();
        this.layerName = this.definLayer.layerName;
    }

    getNewDate() {
        const date = new Date();
        const seper1 = '-';
        const seper2 = ':';
        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        const strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        const currentdate = date.getFullYear() + seper1  + month  + seper1  + strDate + '     ' + date.getHours()  + seper2  + date.getMinutes() + seper2 + date.getSeconds();
        return currentdate;
    }

    ngOnInit() {
        this.getUserList().then((data: any) => {
            this.checkOptionsOne = data;
        });
        this.fetchPersInfo()
    }

    getUserList() {
        return new Promise((resolve) => {
            this.http.get('http://192.168.1.75:8000/users', ({size: 9999, current: 1} as any)).then(rep => {
                if (rep.resp_code === '10000') {
                    const arr = [];
                    const records: any = (rep.data.records || []);
                    records.map(user => {
                        const userobj: any = {};
                        userobj.label = user.nickname;
                        userobj.value = user.username;
                        userobj.id = user.id;
                        arr.push(userobj)
                    })
                    resolve(arr);
                } else {
                    this.message.error('获取用户列表失败，' + rep.resp_msg);
                }
            });
        })
    }

    fetchPersInfo() {
        this.userService.fetchPersInfo().then(res => {
            this.creatUser = res.nickname || '匿名';
        })
    }


    editAtt() {
        this.showFeatureAttEdit = true
    }

    cancelSet() {
        this.showFeatureAttEdit = false;
    }

    // 保存属性
    saveattribute() {
        this.propertyData = {
            'user' : this.bindUserArr,
            'attr':  this.attArray,
            'featurename':  this.featureName,
            'style': this.selectcolor
        };
        this.getFeatureAttr.emit(this.propertyData);
        this.showFeatureAttEdit = false;
    }
    // 绑定属性
    addAttribute() {
        this.AttrForm = this.fb.group({
            attrName: [null, [Validators.required]],
            attrValue: [null, [Validators.required]],
        });
        this.showAttrForm = true;
    }
    handleAttrForm() {
        this.showAttrForm = false;
    }
    // 提交属性表单
    submitAttrForm() {
        this.attArray.push(this.AttrForm.value);
        this.showAttrForm = false;
    }

    // 绑定人员
    addUser() {
        if (this.bindUserArr.length !== 0) {
            this.checkOptionsOne = this.initUserData();
        }
        this.userForm = this.fb.group({
            userName: [this.checkOptionsOne, [Validators.required]],
        });
        this.showUserForm = true;
    }
    // 选中人员的回调
    log(e) {
        this.bindUserArr = [];
         e.map(data => {
             if (data.checked) {
                 const userArray: any = {};
                 userArray.id = data.id;
                 userArray.label = data.label;
                 this.bindUserArr.push(userArray);
             }
         });
    }
    // 取消人员
    handleUserForm() {
        this.showUserForm = false;
    }
    // 提交人员
    submitUserForm() {
        this.showUserForm = false;
    }

    drawFinish() {
        this.finish.emit(this.showFeatureAttEdit);
    }
    drawClose() {
        this.clone.emit();
    }

    deleteCurrentFeature() {
        if (this.currentSelectFeature) {
            this.clone.emit('inEditDelete');
        } else {
            this.clone.emit();
        }
    }

    setStyle() {
        switch (this.layerType) {
            case 1:
                this.showFeatureAttEdit = true;
                this.showSetPointComponent = true;
                break;
            case 2:
                this.showFeatureAttEdit = true;
                this.showSetLineComponent = true;
                break;
            case 3:
                this.showFeatureAttEdit = true;
                this.showSetPolygonComponent = true;
                break;
            default:
        }
    }
    // 点样式
    setPointStyleFun(e) {
        this.selectcolor = e.pointColor;
        this.showSetPointComponent = false;
        this.emitColor.emit(this.selectcolor)
    }

    setLineStyleFun(e) {
        this.selectcolor = e.lintColor;
        this.showSetLineComponent = false;
        this.emitColor.emit(this.selectcolor)
    }
    setPolgonStyleFun(e) {
        this.selectcolor = e.bordercolor;
        this.showSetPolygonComponent = false;
        this.emitColor.emit(this.selectcolor)
    }

    hideComponent(e) {
        switch (this.layerType) {
            case 1:
                this.showSetPointComponent = false;
                break;
            case 2:
                this.showSetLineComponent = false;
                break;
            case 3:
                this.showSetPolygonComponent = false;
                break;
            default:
        }
    }


}
